/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

//
// Component: Form
//
// ========================================================================


// Variables
// ========================================================================

@form-height:                               @global-height;
@form-small-height:                         @global-small-height;
@form-large-height:                         @global-large-height;
@form-small-font-size:                      round(@global-font-size * 0.85);
@form-large-font-size:                      round(@global-font-size * 1.14);

@form-border:                               @global-border;
@form-background:                           @global-light-background;
@form-color:                                @global-color;
@form-placeholder-color:                    @global-muted-color;

@form-focus-border:                         @global-hover-border;
@form-focus-background:                     #fff;
@form-focus-color:                          @global-color;

@form-disabled-border:                      @global-border;
@form-disabled-background:                  @global-light-background;
@form-disabled-color:                       @global-muted-color;

@form-danger-border:                        fade(desaturate(@global-danger-color, 20%), 30%);
@form-danger-background:                    #fff7f8;
@form-danger-color:                         @global-danger-color;

@form-success-border:                       fade(desaturate(@global-success-color, 20%), 30%);
@form-success-background:                   #f4fff5;
@form-success-color:                        @global-success-color;

@form-blank-border:                         @global-border;

@form-legend-border:                        @global-border;
@form-legend-font-size:                     round(@global-font-size * 1.28);
@form-legend-line-height:                   round(@form-legend-font-size * 1.66);

@form-gutter:                               @global-margin;

@form-icon-width:                           @global-height;
@form-icon-font-size:                       @global-font-size;
@form-icon-color:                           @global-muted-color;


// Component
// ========================================================================

.hook-form() {
    border-radius: @global-border-radius;
    font-weight: inherit;
}

// Focus state
.hook-form-focus() {}

// Disabled state
.hook-form-disabled() {}


// Validation states
// ========================================================================

//
// Error state
//

.hook-form-danger() {}

//
// Success state
//

.hook-form-success() {}


// Style modifiers
// ========================================================================

.hook-form-blank() {}
.hook-form-blank-focus() {}


// Miscellaneous
// ========================================================================

.hook-form-misc() {}